<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调皮的模态框</title>
    <link href="https://labfile.oss.aliyuncs.com/courses/9203/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style02.css">
</head>

<body>
    <div class="main" style="min-height: 500px;">
        <div class="container">
            <div class="cup default">
                <div class="top">
                    <div class="title">蓝桥杯算法大赛</div>
                    <div>99 人参赛</div>
                </div>
                <div class="desc">
                    《蓝桥杯第 X 届算法大赛》
                </div>
                <div class="time">
                    开赛时间：06月07日 15:00
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="modal-box">
                            <div class="btn btn-primary sign-btn btn-lg show-modal " onclick="handleClick()">
                                立即报名
                                <div class="modal" id="myModal" tabindex="-1">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <button type="button" class="close" onclick="handleOk($event)"><span aria-hidden="true">&times;</span></button>
                                            <div class="modal-body">
                                                <h3 class="icon">!</h3>
                                                <h3 class="title">很遗憾</h3>
                                                <p class="description">蓝桥杯第 X 届 算法大赛报名已经结束！</p>
                                                <button class="subscribe" onclick="handleOk($event)">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://labfile.oss.aliyuncs.com/courses/9203/jquery.min.js"></script>
        <script src="https://labfile.oss.aliyuncs.com/courses/9203/bootstrap.min.js"></script>
        <script>
        // 请在这里补充代码，根据需求解决事件冒泡带来的问题，实现模态框的显隐操作。
            let myModal = document.querySelector('#myModal')
            function handleClick() {
                myModal.style.display = 'block'
            }
            function handleOk(e) {
                e.stopPropagation() 
                myModal.style.display = 'none'
            }
        </script>
</body>

</html>